<template>
  <div class="drag-edit-zone-canvas" v-if="currentPage" :style="sitePageStyles">
    <div :style="currentPage.styles">
      <div
        ref="focusDom"
        class="drag-edit-zone-style"
        @keydown.delete.exact="onDeleteComponent"
        @keydown.shift.exact="onKeyDownShift"
        @keyup.shift.exact="onKeyUpShift"
        @keydown.ctrl.c.exact="onCopyComponent"
        @keydown.ctrl.g.exact="onGroupComponent"
        @keydown.ctrl.shift.g.exact="onBreakupComponent"
        @keydown.up.exact="onKeyDownUp"
        @keydown.down.exact="onKeyDownDown"
        @keydown.left.exact="onKeyDownLeft"
        @keydown.right.exact="onKeyDownRight"
        @keydown.ctrl.up.exact="onTopAlign"
        @keydown.ctrl.shift.up.exact="onTopAlign"
        @keydown.ctrl.down.exact="onBottomAlign"
        @keydown.ctrl.shift.down.exact="onBottomAlign"
        @keydown.ctrl.left.exact="onLeftAlign"
        @keydown.ctrl.shift.left.exact="onLeftAlign"
        @keydown.ctrl.right.exact="onRightAlign"
        @keydown.ctrl.shift.right.exact="onRightAlign"
        tabindex = "0"
      >
        <!-- <div :style="page.styles"> -->
          <!-- <draggable-generator v-for="(item) in threeComponents" :key="item.id" :item="item"></draggable-generator> -->
          <draggable-generator v-for="(item) in domComponents" :key="item.id" :item="item"></draggable-generator>
          <!-- <draggable-generator v-for="(item) in phaserComponents" :key="item.id" :item="item"></draggable-generator> -->
          <div
            v-if="rightMenu.isVisible"
            class="right-menu-con"
            :style="{top: rightMenu.top, left: rightMenu.left}"
          >
            <ul>
              <li @click.self.capture="onGroupComponent">创建组合</li>
              <li @click.self.capture="onBreakupComponent">解散组合</li>
              <li @click.self.capture="onLeftAlign">左对齐</li>
              <li @click.self.capture="onRightAlign">右对齐</li>
              <li @click.self.capture="onHorizontalCenterAlign">水平居中对齐</li>
              <li @click.self.capture="onVerticalCenterDistribute">垂直居中分布</li>
              <li @click.self.capture="onTopAlign">上对齐</li>
              <li @click.self.capture="onBottomAlign">下对齐</li>
              <li @click.self.capture="onDeleteComponent">删除</li>
              <li @click.self.capture="onCopyComponent">复制</li>
            </ul>
          </div>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import DraggableGenerator from '@/views/components/draggable-generator.vue'
import { coverImg } from '@/views/js/cover-img'
import { loadUtils } from '@/views/js/load-utils'
import { middle } from '@/views/js/middle'
import { mapState, mapGetters } from 'vuex'
import { PAGE_TYPE_ } from '@/common/const'
import { DOM_CID, PHASER_CID } from '@/common/const-wb'
import { H5_TYPE } from '@/common/const-dif'

const components = {
  DraggableGenerator,
};

export default {
  name: "Middle",
  components,
  props: ["id"],
  mixins: [middle, loadUtils, coverImg],
  setup () {
    return {
      isLocalData: false,
      phaserManager: null,
      threeManager: null,
    }
  },
  created() {
    if (this.isLocalData) {
      this.$store.dispatch("components/setLocalData");
    } else {
      this.$store.dispatch("components/getPageDatas", {
        id: this.$route.params.id
      });
    }
  },
  beforeMount() {},
  mounted(){
  },
  computed: {
    ...mapState("components", {
      componentData: state => state.currentComponentData,
      siteAttrs: state => state.attrs,
      siteStatus: state => state.siteStatus,
      fileUploadData: state => state.fileUploadData,
      rightMenu: state => state.rightMenu,
      currentPage: state => state.currentPage,
    }),
    ...mapGetters("components", {
      isWbEvent: "isWbEvent"
    }),
    sitePageStyles() {
      let page = this.currentPage;
      let styles_;
      if (page.type == PAGE_TYPE_.pop) {
        styles_ = _.cloneDeep(page.styles);
      } else {
        styles_ = _.cloneDeep(this.siteStyles);
        styles_.width = page.styles.width;
        styles_.height = page.styles.height;
      }
      return styles_;
    },
    domComponents() {
      if(this.siteAttrs.h5Type == H5_TYPE.canvas){
        return this.getComponentsByCid(DOM_CID, PHASER_CID);
      }else{
        return this.currentPage.components;
      }
    },
  },
  methods: {
    getComponentsByCid(minCid, maxCid) {
      let components = [];
      _.forEach(this.currentPage.components, component => {
        if (component.cid >= minCid && component.cid < maxCid) {
          components.push(component);
        }
      });
      return components;
    },
  },
  updated() {
    if (this.$refs.focusDom) {
      this.$refs.focusDom.focus();
    }
  },
  beforeUnmount() {}
};
</script>

